<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
        @single-handle="changeSingleHandle"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset">
            <!-- <template v-slot:btn>
              <el-button :size="size" type="primary">车辆超时无订单</el-button>
            </template> -->
          </c-search>
          <el-button-group class="btn-group">
            <el-button type="primary" @click="showParkDialog(0)">设置投放网点</el-button>
          </el-button-group>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        width="80%"
        :class="dialogObj.type === 1 ? 'dialog-box' : ''"
        :fullscreen="dialogObj.type !== 1 && dialogObj.type !== 4"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        :no-btn="dialogObj.noBtn"
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <park-add v-if="dialogObj.type === 1 || dialogObj.type === 0" ref="childRef" :init-data.sync="dialogObj.initData"></park-add>
        <!-- <review-map v-if="dialogObj.type === 2" ref="childRef" :init-data.sync="dialogObj.initData"></review-map> -->
        <!-- <map-track v-if="dialogObj.type === 3" ref="childRef" :init-data.sync="dialogObj.initData"></map-track> -->
        <!-- <dispatcher-add v-if="dialogObj.type === 4" ref="childRef" :init-data.sync="dialogObj.initData"></dispatcher-add> -->
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
// import dictObj from '@/store/dictData'
import ParkAdd from './park-add'
// import ReviewMap from './review-map'
// import MapTrack from './map-track'
// import dispatcherAdd from './dispatcher-add'
import { deviceQueryOptDeviceListApi, deviceUpdateOptDeviceApi } from '@/api/deviceApi'

export default {
  name: 'carOperate',
  mixins: [mixinTable],
  components: {
    CDialog,
    ParkAdd
    // ReviewMap,
    // MapTrack,
    // dispatcherAdd
  },
  data(vm) {
    return {
      carInfo: null, // 选中当前车辆信息
      // 对话框对象
      dialogObj: {},
      // 表格内操作按钮
      tableInnerBtns: [
        // {
        //   name: '车辆图片',
        //   icon: 'el-icon-view',
        //   width: 100,
        //   handle(row) {
        //     const { carNumber } = row
        //     vm.routerLink(`/vehicle/operate/review/${carNumber}`)
        //   }
        // }
      ],
      tableHeader: [
        {
          label: '设备码',
          prop: 'sn',
          fixed: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '投放网点',
          prop: 'ssmName',
          width: 110,
          search: {
            type: 'input'
          }
        },
        {
          label: '设备状态',
          prop: 'status',
          setColor: row => (row.status == 0 ? 'red' : ''),
          formatter: row => row && vm.setTableColumnLabel(row.status, 'optStatusList')
          // search: {
          //   type: 'dict',
          //   prop: 'status',
          //   optionsList: dictObj.searchOperateStatusList
          // }
        },
        {
          label: '网络类型',
          prop: 'netType',
          width: 140
          // formatter: row => (row && dictObj.carOperateStatus[row.carRunStatus] ? dictObj.carOperateStatus[row.carRunStatus].name : row.carRunStatus),
          // search: {
          //   type: 'dict',
          //   prop: 'status',
          //   optionsList: dictObj.searchOperateStatusList
          // }
        },
        {
          label: '网络强度',
          prop: 'netst',
          width: 140
        },
        {
          label: '经度',
          prop: 'lng',
          width: 140
        },
        {
          label: '纬度',
          prop: 'lat',
          width: 140
        },
        {
          label: '当前音量值',
          prop: 'volume',
          width: 140
        },
        {
          label: '内照明',
          prop: 'inLight',
          width: 140
        },
        {
          label: '外照明',
          prop: 'outLight',
          width: 140
        },
        {
          label: '沐浴露量',
          prop: 'volume',
          width: 140
        },
        {
          label: '护毛素量',
          prop: 'conditioner',
          width: 140
        },
        {
          label: '消毒液量',
          prop: 'disinfectant',
          width: 140
        },
        {
          label: '温度',
          prop: 'temp',
          width: 140
        },
        {
          label: '室温',
          prop: 'roomTemp',
          width: 140
        },
        {
          label: '电量',
          prop: 'eleLevel',
          width: 140
        },
        {
          label: '电压',
          prop: 'voltage',
          width: 140
        },
        {
          label: '电流',
          prop: 'eleCurrent',
          width: 140
        },
        {
          label: '频率',
          prop: 'freq',
          width: 140
        },
        {
          label: '开门状态',
          prop: 'doorState',
          formatter: row => (row.doorState === 0 ? '关闭' : '开门')
        },
        {
          label: '紧急按键状态',
          prop: 'urgenState',
          formatter: row => (row.urgenState === 0 ? '关闭' : '启动')
        },
        {
          label: '水位状态',
          prop: 'waterLevelState',
          formatter: row => (row.waterLevelState === 0 ? '不可用' : '可用')
        },
        {
          label: '沐浴露状态',
          prop: 'bodyWashState',
          formatter: row => (row.bodyWashState === 0 ? '不可用' : '可用')
        },
        {
          label: '护毛素状态',
          prop: 'conditionerState',
          formatter: row => (row.conditionerState === 0 ? '不可用' : '可用')
        },
        {
          label: '消毒液状态',
          prop: 'disinfectantState',
          formatter: row => (row.disinfectantState === 0 ? '不可用' : '可用')
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { sn, ssmName } = this.searchObj
      this.isLoading = true
      deviceQueryOptDeviceListApi({
        pageNo,
        pageSize,
        sn,
        ssmName
      }).then(res => {
        console.log('252===', res)
        this.isLoading = false
        this.tableList = res.data.data
        this.pageInfo.totalNum = res.totalCount
      })

      // this.$api.vehicle
      //   .fetch('carMrgRunList', {
      //     ...searchDate,
      //     ...other,
      //     rows: pageNo,
      //     offset: pageSize
      //   })
      //   .then(res => {
      //     this.isLoading = false
      //     if (res && res.totalCount) {
      //       const { data, totalCount } = res
      //       this.pageInfo.totalNum = totalCount
      //       this.tableList = data || []
      //     } else {
      //       this.tableList = res || []
      //     }
      //   })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      this.dialogObj = {
        isShow: true,
        isEdit: opts.isEdit || false,
        noBtn: opts.noBtn,
        type: opts.type,
        title: opts.title || '设置网点',
        initData: opts.initData
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const { ssmInfo, initData } = this.$refs.childRef
      console.log(ssmInfo)
      console.log(initData)
      deviceUpdateOptDeviceApi({
        id: initData.id,
        ssmId: ssmInfo.id
      }).then(res => {
        console.log('306====', res)
        if (res.code === 0) {
          this.responeHandle('设置投放网点成功')
        }
      })
    },
    showParkDialog(type) {
      console.log('336===', this.carInfo)
      if (this.carInfo) {
        const { id, ssmId, ssmName } = this.carInfo
        console.log('315====', id)
        console.log('316====', ssmId)
        if (!id) {
          return this.$msgTip('请先选择设备', 'warning')
        }
        this.showDialog({
          isShow: true,
          type,
          title: `设置投放网点（${ssmName}）`,
          noBtn: false,
          initData: {
            type,
            id,
            ssmId,
            ssmName
          }
        })
      } else {
        this.$msgTip('请先选择车辆', 'warning')
      }
    },
    changeSingleHandle(item) {
      console.log('358===', item)
      this.carInfo = item
    }
  }
}
</script>
